<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <script src="../../js/commonJs.js"></script>
    <script src="../../js/commonCss.js"></script>
    <title>广告管理</title>
</head>
<body>
<div id="app" v-cloak>
    <div>
        <header>
            <span class="title">{{titleText}}</span>
            <el-button size="small" v-if="!isList" @click="returnBack">返回</el-button>
        </header>
    </div>
    <div class="table-wraper" v-if="isList">
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="remark" label="名称"></el-table-column>
            <el-table-column label="广告图">
                <template slot-scope="scope">
                    <img style="width: 100%;height:50px;" :src="scope.row.dictKey"></img>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)" type="text" size="medium">修改</el-button>
                    <el-button @click="handleDelete(scope.row)" type="text" size="medium" class="color-F56C6C">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="edit-wraper" v-else>
        <div style="width: 40%; margin: 50px auto;">
            <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-form-item label="名称">
                    <el-col :span="12">
                        <el-input v-model="addForm.remark"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="广告图" prop="mlImg">
                    <el-upload
                            class="avatar-uploader"
                            action="doUpload"
                            :before-upload="beforeUpload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            accept=".png,.jpg">
                        <img v-if="dictKey" :src="dictKey" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="returnBack">返回</el-button>
                    <el-button type="primary" @click="onSubmit()">修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: function () {
            return {
                //删除url
                delUrl: 'irDict/doDeleteDict',
                tableData: [{
                    dictId: '1',
                    remark: "",
                    dictKey: ""
                },
                    {
                        dictId: '2',
                        remark: "",
                        dictKey: ""
                    }],
                // 修改
                isList: true,
                isEdit: false,
                dictKey: "",
                folder: 'irDict',
                addForm: {
                    dircId: "",
                    remark: "",
                    dictKey: "",
                },
            }
        },
        methods: {
            /*删除end*/
            returnBack: function () {
                this.isEdit = false;
                this.isList = true;
                this.addForm = {};
                this.reload();
            },
            handleEdit: function (row) {
                this.isEdit = true;
                this.isList = false
                this.addForm = row
                this.dictKey = row.dictKey
            },
            setPic(path) {
                vm.dictKey = imageURL + path
                vm.addForm.dictKey = imageURL +path
            },
            handleAvatarSuccess(res, file) {

            },
            // 删除
            handleDelete: function (row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var args = {}
                    args.dictId = row.dictId
                    $.ajax({
                        type: "POST",
                        url: baseURL + "irDict/doDeleteDict",
                        data: args,
                        async: false,
                        dataType: "JSON",
                        success: function (data) {
                            if (data.code == 0) {
                                vm.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    vm.reload()
                                }, 500)
                            } else {
                                vm.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        },
                        error: function () {
                            vm.$message({
                                message: '系统错误',
                                type: 'error'
                            });
                        }
                    })
                }).catch(function () {
                    vm.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            onSubmit: function () {
                var url = baseURL + "irDict/doUpdateDict?token=" + token;
                if (vm.addForm.remark == null || vm.addForm.remark == '') {
                    vm.vAlert('请输入名称', '错误')
                    return false;
                }
                if (vm.addForm.dictKey == null || vm.addForm.dictKey == '') {
                    vm.vAlert('请上传图片', '错误')
                    return false;
                }
                axios.post(url, this.addForm)
                    .then(function (res) {
                        if (res.data.msg == 'token失效，请重新登录') {
                            alert('token失效，2秒后跳转到登录页面！');
                            var timeout = setTimeout(function () {
                                window.parent.location.href = baseURL + "login.html";
                                clearTimeout(timeout);
                            }, 2000)
                        }
                        if (res.data.code === 0) {
                            vm.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            setTimeout(function () {
                                vm.reload();
                            }, 500)
                        } else {
                            vm.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                    });
            },
            //获取广告信息
            getDictDetail() {
                var url = baseURL + "irDict/getDictDetail?token=" + token
                axios.post(url)
                    .then((res) => {
                        if (res.data.code === 0) {
                            if (res.data.list != null) {
                                vm.tableData = res.data.list;
                            }
                        } else {
                            vm.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
            },
            //删除广告
            deleteDict(row) {
                //删除问题
                var ids = [];
                ids.push(row.dictId);
                vm.del(ids);
            },
        },
        computed: {
            titleText: function () {
                if (this.isEdit) {
                    return '修改'
                } else {
                    return "广告管理"
                }
            }
        },
        created() {
            this.getDictDetail()
        },
    });
</script>
</html>
